﻿@{
	Page.Title = "Gridster.";
}

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a href="#" class="brand" title="Your Logo">Griddy</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

<div id="GriddySideBar">

	<div class="menu">
		<h2><span>side</span>Bar</h2>

		<ul>
			<li id="ToggleEdit">Toggle Editing</li>
			<li id="AddBlock">Add Block</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>

	</div>
	<div class="handle">Griddy</div>
</div>

<div id="Griddy">
	<div class="gridster">
		<ul id="UlGrid" class="leGrid">
			

			@*Row 1*@
			<li class="widget" data-row="1" data-col="1" data-sizex="3" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a three columns grid panel with an arbitrary height.</p>
				</div>
			</li>

			<li class="widget" data-row="1" data-col="4" data-sizex="6" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
				</div>
			</li>

			<li class="widget" data-row="1" data-col="11" data-sizex="3" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a three columns grid panel with an arbitrary height.</p>
				</div>
			</li>
			
			

			@*Row 2*@
			<li class="widget" data-row="3" data-col="1" data-sizex="6" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
				</div>
			</li>

			<li class="widget" data-row="3" data-col="7" data-sizex="2" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a two columns grid panel with an arbitrary height.</p>
				</div>
			</li>

			<li class="widget" data-row="3" data-col="9" data-sizex="4" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a four columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami.</p>
				</div>
			</li>

			@*Row 3*@

			<li class="widget" data-row="5" data-col="1" data-sizex="4" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a four columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami.</p>
				</div>
			</li>

			<li class="widget" data-row="5" data-col="5" data-sizex="4" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a four columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami.</p>
				</div>
			</li>

			<li class="widget" data-row="5" data-col="9" data-sizex="4" data-sizey="2">
				<div class="content">
					<h5>Panel Title</h5>
					<p>This is a four columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami.</p>
				</div>
			</li>


			<li data-row="7" data-col="1" data-sizex="8" data-sizey="3" class="widget" >
				<div class="inner">
					<div id="featured">
						<img src="/img/demo1.jpg" />
						<img src="/img/demo2.jpg" />
						<img src="/img/demo3.jpg" />
					</div>
				</div>
			</li>



			<li data-row="7" data-col="1" data-sizex="8" data-sizey="3" class="widget " >
				<div class="inner timeWidget">
					<div class="iconHolder"> 
						<span class="icon clock"></span>
						<span class="label">Time </span>
					</div>

					<div class="clockHolder">
						<span>3:15</span>
					</div>

					<div class="dateHolder">
						Wednesday, September 17,2012
					</div>
					
				</div>
			</li>

			





		</ul>
	</div>
</div>



<div id="NewBox" class="reveal-modal [expand, xlarge, large, medium, small]">
  <h2>Add a block.</h2>
  <p class="lead">As simple as selecting the boxes below, and click "insert".</p>
  <p>Select the size of the box you wish to insert:</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

